import PageContainerMonitorLinkage from '@/pages/monitor/linkage/components/PageContainerMonitorLinkage';
import { DatabaseOutlined, FileSyncOutlined } from '@ant-design/icons';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useState } from 'react';
import { useAccess } from 'umi';


export default (): React.ReactNode => {
  const access = useAccess();

  const [tabActiveKey, setTabActiveKeyState] = useState<string>('all');

  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  return (
    <Layout
      hasSider
      style={{
        backgroundColor: '#F7F7F7',
        padding: '15px',
      }}
    >
      <Layout.Sider
        width={300}
        style={{
          backgroundColor: '#F7F7F7',
          overflow: 'auto',
          height: '100%',
          position: 'fixed',
          paddingBottom: 30,
        }}
      >
        <Card
          style={{
            height: '100%',
          }}
          bordered={false}
          styles={{
            body: {
              padding: '8px 15px 15px',
            },
          }}
        >
          <span style={{fontSize:14,display:'flex',justifyContent:'center',padding:5,fontWeight:'bold'}}>问题联动处置</span>
          <Menu
            onSelect={(info: SelectInfo) => {
              const key = info.key;
              let menuName = '';
              if (key === 'all') {
                menuName = '全部';
              }
              if (key === 'pending') {
                menuName = '待处理';
              }
              setTabActiveKeyState(info.key);
            }}
            style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
            defaultSelectedKeys={[tabActiveKey]}
            mode="vertical"
            items={[
              {
                label: <span>全部{renderBadge(0, tabActiveKey === 'all')}</span>,
                key: 'all',
                icon: <DatabaseOutlined />,
              },
              {
                label: <span>待处理{renderBadge(0, tabActiveKey === 'pending')}</span>,
                key: 'pending',
                icon: <FileSyncOutlined />,
              },
            ]}
          />
        </Card>
      </Layout.Sider>
      <Layout.Content style={{ marginLeft: '315px' }}>
        <div
          style={{
            width: 'calc(100% - 315px)',
            height: '100%',
            position: 'fixed',
            paddingBottom: 30,
            paddingRight: 30,
          }}
        >
          <Card
            style={{
              height: '100%',
              overflow: 'auto',
            }}
            styles={{
              body: {
                padding: '8px',
              },
            }}
          >
            {tabActiveKey === 'all' ? (
              <PageContainerMonitorLinkage />
            ) : tabActiveKey === 'pending' ? (
              <PageContainerMonitorLinkage />
            ) : (
              <></>
            )}
          </Card>
        </div>
      </Layout.Content>
    </Layout>
  );
};
